<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="/css/common.css" rel="stylesheet" type="text/css" />
<style>
input {width:150px;}
.wrapContent {margin:0 auto;padding:0 30px;}
.center {text-align:center;}
.block {padding:10px 30px;}
.line {border:none;border-bottom:1px solid #666;clear:both;}
.lineHeight{height:34px;line-height:34px;}
.right {text-align:right;width:120px;vertical-align:top}
.errMsg {color:red;margin:0 0 0 5px;}
</style>
</head>
<body>
<div class="wrapContent">
	<div class="block">
		<h2 class="center">添加客户</h2>
		<table style="width:800px;border:none;margin:50px auto 0;" cellpadding="0" cellspacing="0">
			<tr class="lineHeight">
				<td class="right">客户名称：</td>
				<td>
					<select id="nameSelect">
					<?php
						echo "<option value='-1'>请选择</option>";
						foreach($customerList['data'] as $customer){
							echo "<option value='{$customer['id']}'>{$customer['name']}</option>";
						}
					?>
					</select>
					<input id="addName" type="button" value="增加" style="width:auto;" />
					<input id="nameInput" style="display:none;width:300px;"/>
					<b id="nameErrMsg" class="errMsg">*</b>
				</td>
			</tr>
			<tr class="lineHeight">
				<td class="right">办公点：</td>
				<td>
					<input id="childNameInput" style="width:300px;"/>
					<b id="childNameErrMsg" class="errMsg">*</b>
				</td>
			</tr>
			<tr class="lineHeight">
				<td class="right">地区：</td>
				<td><select id="province" name="province"></select> <select id="city" name="city"></select> <select id="area" name="area"></select><b id="areaErrMsg" class="errMsg">*</b></td>
			</tr>
			<tr class="lineHeight">
				<td class="right">详细地址：</td>
				<td><input id="address" style="width:560px;"/><b id="addressErrMsg" class="errMsg">*</b></td>
			</tr>
			<tr class="lineHeight">
				<td class="right">邮政编码：</td>
				<td><input id="zipcode" style="width:200px;"/><b id="zipcodeErrMsg" class="errMsg">*</b></td>
			</tr>
			<tr class="lineHeight">
				<td class="right">联系人：</td>
				<td><input id="contact" style="width:200px;"/><b id="contactErrMsg" class="errMsg">*</b></td>
			</tr>
			<tr class="lineHeight">
				<td class="right">电话：</td>
				<td><input id="tel" style="width:200px;"/><b id="telErrMsg" class="errMsg">*</b></td>
			</tr>
			<tr class="lineHeight">
				<td class="right">Email：</td>
				<td><input id="email" style="width:200px;"/><b id="emailErrMsg" class="errMsg"></b></td>
			</tr>
		</table>
	</div>
	<div class="center">
		<input id="submit" type="button" class="submitBtn" value="确定"/>
	</div>
</div>
</body>
<script src="/js/lib.min.js" type="text/javascript"></script>
<script src="/js/pcas.min.js" type="text/javascript"></script>
<script type="text/javascript">
function getSelectValue(id) {
	var obj = $('#'+id)[0];
	return obj.options[obj.selectedIndex].value;
}
function getSelectText(id) {
	var obj = $('#'+id)[0];
	return obj.options[obj.selectedIndex].text;
}
function getSelectIdValue(id) {
	var obj = $('#'+id)[0];
	return obj.options[obj.selectedIndex].attribute('id');
}
function getArea(id) {
	return getSelectValue(id);
}
new PCAS("province","city","area");
var isInputName = false,
	nameSelect = $('#nameSelect'),
	nameInput = $('#nameInput'),
	nameErrMsg = $('#nameErrMsg'),
	addNameBtn = $('#addName'),
	childNameInput = $('#childNameInput'),
	childNameErrMsg = $('#childNameErrMsg'),
	areaErrMsg = $('#areaErrMsg'),
	addressInput = $('#address'),
	addressErrMsg = $('#addressErrMsg'),
	zipcodeInput = $('#zipcode'),
	zipcodeErrMsg = $('#zipcodeErrMsg'),
	contactInput = $('#contact'),
	contactErrMsg = $('#contactErrMsg'),
	telInput = $('#tel'),
	telErrMsg = $('#telErrMsg'),
	emailInput = $('#email'),
	emailErrMsg = $('#emailErrMsg'),
	submitBtn = $('#submit');

addNameBtn.attr({onclick:function(){
	changeInputName();
}});

nameSelect.attr({onchange:function(){
	if (this.value != -1) {
		addNameBtn.hide();
	}else {
		addNameBtn.css({display:'inline'});
	}
	resetCustomerInfo();
}});

submitBtn.attr({onclick:function(){
	
	var checkFlag = true;
	var pid = getSelectValue('nameSelect');
	if (!isInputName) {
		if (pid == -1) {
			nameErrMsg.html('请选择客户名称');
			checkFlag && nameSelect[0].focus();
			checkFlag = false;
		}
	}else {
		if ($.trim(nameInput.val()) == '') {
			nameErrMsg.html('请填写客户名称');
			checkFlag && nameInput[0].focus();
			checkFlag = false;
		}
	}
	
	var childName = $.trim(childNameInput.val());
	if (!childName) {
		childNameErrMsg.html('请输入办公点名称');
		checkFlag && childNameInput[0].focus();
		checkFlag = false;
	}
	
	var province = getArea('province'),
		city = getArea('city'),
		area = getArea('area');
	city = (city.indexOf('市辖') >= 0) ? '' : city;
	area = (area.indexOf('市辖') >= 0) ? '' : area;
	if (!province) {
		areaErrMsg.html('请选择地区');
		checkFlag && $('#province')[0].focus();
		checkFlag = false;
	}else {
		areaErrMsg.html('*');
	}
		
	var address = $.trim(addressInput.val());
	if (!address) {
		addressErrMsg.html('请输入详细地址');
		checkFlag && addressInput[0].focus();
		checkFlag = false;
	}else {
		addressErrMsg.html('*');
	}
	
	var zipcode = $.trim(zipcodeInput.val());
	if (!zipcode) {
		zipcodeErrMsg.html('请输入邮政编码');
		checkFlag && zipcodeInput[0].focus();
		checkFlag = false;
	}else {
		zipcodeErrMsg.html('*');
	}
	
	var contact = $.trim(contactInput.val());
	if (!contact) {
		contactErrMsg.html('请输入邮政编码');
		checkFlag && contactInput[0].focus();
		checkFlag = false;
	}else {
		contactErrMsg.html('*');
	}
	
	var tel = $.trim(telInput.val());
	if (!tel) {
		telErrMsg.html('请输入电话');
		checkFlag && telInput[0].focus();
		checkFlag = false;
	}else {
		telErrMsg.html('*');
	}
	
	var email = $.trim(emailInput.val());
	if (email && email.indexOf('@') < 0) {
		emailErrMsg.html('无效的email地址');
		checkFlag && emailInput[0].focus();
		checkFlag = false;
	}else {
		emailErrMsg.html('');
	}
	
	if (!checkFlag) {
		return; 
	}
	
	var postData = {
		'pid':pid,
		'name': (isInputName ? $.trim(nameInput.val()) : getSelectText('nameSelect')),
		'childName':childName,
		'area':province+'_'+city+'_'+area,
		'address':address,
		'zipcode':zipcode,
		'contact':contact,
		'tel':tel,
		'email':email
	}
	
//	console.log('data', postData);
	submitBtn.val('正在处理，请稍后...');
	submitBtn[0].disabled = true;
	
	$.ajax({
		url:'/admin/customer.php?op=doAdd',
		data:postData,
		type:'POST',
		callback:function(res){
			alert(res.errmsg);
			submitBtn.val('确定')
			submitBtn[0].disabled = false;
			if (res.errno == '0'){
				location.reload();	
			}
		}
	});
	
}});

function changeInputName() {
	nameSelect.hide();
	addNameBtn.hide();
	nameInput.css({display:'inline'});
	isInputName = true;
}

function resetCustomerInfo(){
	$('#province')[0].options.length=0;
	new PCAS("province","city","area");
	areaErrMsg.html('*');
	addressInput.val('');
	addressErrMsg.html('*');
	zipcodeInput.val('');
	zipcodeErrMsg.html('*');
	contactInput.val('');
	contactErrMsg.html('*');
	telInput.val('');
	telErrMsg.html('*');
	emailInput.val('');
	emailErrMsg.html('');
}
</script>
</html>